<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>代码生成器 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <link rel="preload" href="/my/assets/css/0.styles.82a18d97.css" as="style"><link rel="preload" href="/my/assets/js/app.fc4964fc.js" as="script"><link rel="preload" href="/my/assets/js/513.edb84f11.js" as="script"><link rel="preload" href="/my/assets/js/1380.293bba0c.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.82a18d97.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>开发指南</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/my/guide/access.html" class="sidebar-link">权限控制</a></li><li><a href="/my/guide/app.html" class="sidebar-link">子应用微服务</a></li><li><a href="/my/guide/cmd.html" class="sidebar-link">脚本命令</a></li><li><a href="/my/guide/coder.html" aria-current="page" class="active sidebar-link">代码生成器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/coder.html#概述" class="sidebar-link">概述</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/coder.html#示例" class="sidebar-link">示例</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#约定" class="sidebar-link">约定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/coder.html#请求url的约定" class="sidebar-link">请求URL的约定</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#请求传参的约定" class="sidebar-link">请求传参的约定</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#分页查询多个实体-请求参数约定" class="sidebar-link">分页查询多个实体，请求参数约定</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#响应数据的约定" class="sidebar-link">响应数据的约定</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#分页查询多个实体-响应示例" class="sidebar-link">分页查询多个实体 响应示例</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#响应码code的约定" class="sidebar-link">响应码code的约定</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#请求跨域问题解决方案" class="sidebar-link">请求跨域问题解决方案</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#全局配置" class="sidebar-link">全局配置</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#常用的配置项" class="sidebar-link">常用的配置项</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/coder.html#pathprefix" class="sidebar-link">pathPrefix</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#methodtypemap" class="sidebar-link">methodTypeMap</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#methodsuffixmap" class="sidebar-link">methodSuffixMap</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#methodcommentmap" class="sidebar-link">methodCommentMap</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#batchenabled" class="sidebar-link">batchEnabled</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#statelistname" class="sidebar-link">stateListName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#statemodelname" class="sidebar-link">stateModelName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#statepagename" class="sidebar-link">statePageName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#statepagesizename" class="sidebar-link">statePageSizeName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#statetotalname" class="sidebar-link">stateTotalName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#mockdataname" class="sidebar-link">mockDataName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#mockcodename" class="sidebar-link">mockCodeName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#mockmsgname" class="sidebar-link">mockMsgName</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#successcodevalue" class="sidebar-link">successCodeValue</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#模型配置" class="sidebar-link">模型配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_1、实现对一个实体进行增、删、改、查" class="sidebar-link">1、实现对一个实体进行增、删、改、查</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_2、实现对一个实体进行增、删、改、查-并且带模拟数据" class="sidebar-link">2、实现对一个实体进行增、删、改、查，并且带模拟数据</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_3、只需要增、删、改、查中得某些操作-可以指定生成你需要的方法" class="sidebar-link">3、只需要增、删、改、查中得某些操作，可以指定生成你需要的方法</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_4、自定义方法配置" class="sidebar-link">4、自定义方法配置</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_5、同一个实体模型配置多个方法" class="sidebar-link">5、同一个实体模型配置多个方法</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_6、自定义ajax参数选项" class="sidebar-link">6、自定义Ajax参数选项</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_7、自定义模拟数据模板" class="sidebar-link">7、自定义模拟数据模板</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_8、自定义数据转换函数" class="sidebar-link">8、自定义数据转换函数</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_9、指定请求接口地址前缀" class="sidebar-link">9、指定请求接口地址前缀</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#调用方式" class="sidebar-link">调用方式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/coder.html#vuex-模式调用" class="sidebar-link">vuex 模式调用</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#mixin-模式调用" class="sidebar-link">mixin 模式调用</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#常见问题" class="sidebar-link">常见问题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_1、post数据时-后端接口接收不到前端传递的参数。" class="sidebar-link">1、POST数据时，后端接口接收不到前端传递的参数。</a></li><li class="sidebar-sub-header"><a href="/my/guide/coder.html#_2、请求接口跨域报错" class="sidebar-link">2、请求接口跨域报错</a></li></ul></li></ul></li><li><a href="/my/guide/config.html" class="sidebar-link">配置</a></li><li><a href="/my/guide/constant.html" class="sidebar-link">常量和静态配置</a></li><li><a href="/my/guide/extension.html" class="sidebar-link">内置实例扩展</a></li><li><a href="/my/guide/route.html" class="sidebar-link">自动配置路由</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>内置资源</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>进阶教程</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>第三方类库</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="代码生成器"><a href="#代码生成器" class="header-anchor">#</a> 代码生成器</h1> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p>Vue是一个以数据驱动的MVVM框架，在开发大型应用时，推荐使用Vuex作数据状态管理。前后端分离开发模式协作时也面临着对接口响应模拟数据需求。
根据Vue推荐的开发实践，在开发一个相对规模较大的应用，底层与后端交互时，代码分为以下几个部分：</p> <table><thead><tr><th>代码块</th> <th>说明</th></tr></thead> <tbody><tr><td>api</td> <td>抽取出API请求</td></tr> <tr><td>store</td> <td>状态管理vuex，包含actions、mutations、modules、 mutation-types</td></tr> <tr><td>mock</td> <td>模拟数据模板</td></tr></tbody></table> <p>在实践中，我们发现上述的代码重复率非常高，新增和修改都费力，并且是没技术含量的体力活。 但又必须要这样做，不适合以公共函数的形式重用，为了解决这个重复的体力活，我们开发了代码生成器，用工具来代替体力活。</p> <p>对于前后端的数据交互都可以归纳为是对实体的 新增、修改、删除、查询。</p> <p>代码生成器的原理是也是按照对实体的增、删、改、查规范，利用NodeJs根据接口的配置文件（包含请求路径、请求选项、状态管理、模拟数据）按指定模板创建符合Vue开发规范的js文件到工程指定目录下。</p> <h3 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h3> <p>以下通过一个用户的实体配置，讲解由代码生成器生成的代码文件</p> <p>1、新建文件 <code>/schemas/user.js</code> 以下配置实现用户的增、删、改、查接口调用、状态管理，并响应模拟数据</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否采用vuex模式， 代码模式支持 vuex 和 mixin，false表示采用mixin模式</span>

  <span class="token comment">// 实体模型</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/demo/user'</span><span class="token punctuation">,</span> <span class="token comment">// 请求实体api路径</span>

    <span class="token comment">// 模拟实体属性字段数据</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'@cname'</span><span class="token punctuation">,</span>
      email<span class="token operator">:</span> <span class="token string">'@email'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>新建实体配置文件必须要在/schemas/目录下，可以建目录。</p></div> <p>2、运行命令 <code>npm run coder</code> 或 <code>npm run dev</code>  生成代码，代码文件目录在 <code>/.my/code/</code>, 目录结构如下：</p> <p><img src="" alt="Alt text"></p> <h2 id="约定"><a href="#约定" class="header-anchor">#</a> 约定</h2> <p>代码生成器生成的代码需要与后端接口有预先的约定</p> <h3 id="请求url的约定"><a href="#请求url的约定" class="header-anchor">#</a> 请求URL的约定</h3> <p>前后端分离开发最佳实践是采用RESTful的接口形式进行通信，在此我们对请求URL进行统一的规范约定</p> <table><thead><tr><th>请求类型</th> <th>前端约定的方法前缀</th> <th>请求方法类型</th> <th>URL格式</th> <th>示例</th></tr></thead> <tbody><tr><td>新增</td> <td>add</td> <td>POST</td> <td>http://[主机ip]:[端口]/[路径]/[实体名称]</td> <td>http://127.0.0.1:80/api/users</td></tr> <tr><td>更新</td> <td>update</td> <td>PATCH</td> <td>http://[主机ip]:[端口]/[路径]/[实体名称]</td> <td>http://127.0.0.1:80/api/users</td></tr> <tr><td>删除</td> <td>remove</td> <td>DELETE</td> <td>http://[主机ip]:[端口]/[路径]/[实体名称]/[主键ID]</td> <td>http://127.0.0.1:80/api/users/123</td></tr> <tr><td>查询单个实体</td> <td>get</td> <td>GET</td> <td>http://[主机ip]:[端口]/[路径]/[实体名称]/[主键ID]</td> <td>http://127.0.0.1:80/api/users/123</td></tr> <tr><td>分页查询多个实体</td> <td>fetch</td> <td>GET</td> <td>http://[主机ip]:[端口]/[路径]/[实体名称]</td> <td>http://127.0.0.1:80/api/users</td></tr> <tr><td>批量删除</td> <td>batch</td> <td>POST</td> <td>http://[主机ip]:[端口]/[路径]/[实体名称]/remove</td> <td>http://127.0.0.1:80/api/userss/remove</td></tr></tbody></table> <h3 id="请求传参的约定"><a href="#请求传参的约定" class="header-anchor">#</a> 请求传参的约定</h3> <p>GET和POST两种请求方式的的传参约定</p> <table><thead><tr><th>请求方式</th> <th>传参形式</th> <th>示例</th></tr></thead> <tbody><tr><td>GET</td> <td>Url查询字符串，中文需要转码</td> <td>http://127.0.0.1:80/api/user/list?keyword=%E5%A7%93%E5%90%8D</td></tr> <tr><td>DELETE</td> <td>Url查询字符串，中文需要转码</td> <td>http://127.0.0.1:80/api/user/list?keyword=%E5%A7%93%E5%90%8D</td></tr> <tr><td>POST</td> <td>JSON格式字符串，请求头需要加上Content—Type=application/json</td> <td>http://127.0.0.1:80/api/user/save <br> {&quot;name&quot;:&quot;kenny&quot;, &quot;password&quot;:&quot;123&quot;}</td></tr> <tr><td>PATCH</td> <td>JSON格式字符串，请求头需要加上Content—Type=application/json</td> <td>http://127.0.0.1:80/api/user/remove <br> {&quot;name&quot;:&quot;kenny&quot;, &quot;password&quot;:&quot;123&quot;}</td></tr></tbody></table> <h3 id="分页查询多个实体-请求参数约定"><a href="#分页查询多个实体-请求参数约定" class="header-anchor">#</a> 分页查询多个实体，请求参数约定</h3> <table><thead><tr><th>参数名</th> <th>说明</th></tr></thead> <tbody><tr><td>limit</td> <td>每页几条数据</td></tr> <tr><td>page</td> <td>页码，从1开始</td></tr></tbody></table> <h3 id="响应数据的约定"><a href="#响应数据的约定" class="header-anchor">#</a> 响应数据的约定</h3> <table><thead><tr><th>请求类型</th> <th>成功响应</th> <th>异常响应</th></tr></thead> <tbody><tr><td>新增</td> <td><code>{&quot;code&quot;: 0, &quot;data&quot;: {...model}, &quot;msg&quot;: &quot;成功&quot;}</code></td> <td><code>{&quot;code&quot;: 403, &quot;msg&quot;: &quot;权限不足&quot;}</code></td></tr> <tr><td>更新</td> <td><code>{&quot;code&quot;: 0, &quot;data&quot;: true, &quot;msg&quot;: &quot;成功&quot;}</code></td> <td><code>{&quot;code&quot;: 403, &quot;msg&quot;: &quot;权限不足&quot;}</code></td></tr> <tr><td>删除</td> <td><code>{&quot;code&quot;: 0, &quot;data&quot;: true, &quot;msg&quot;: &quot;成功&quot;}</code></td> <td><code>{&quot;code&quot;: 403, &quot;msg&quot;: &quot;权限不足&quot;}</code></td></tr> <tr><td>查询单个实体</td> <td><code>{&quot;code&quot;: 0, &quot;data&quot;: {...model}, &quot;msg&quot;: &quot;成功&quot;}</code></td> <td><code>{&quot;code&quot;: 403, &quot;msg&quot;: &quot;权限不足&quot;}</code></td></tr> <tr><td>分页查询多个实体</td> <td><code>{&quot;code&quot;: 0, &quot;data&quot;: {&quot;list&quot;: [{...model},...], &quot;page&quot;:1, &quot;pages&quot;: 1000, &quot;total&quot;: 10000), &quot;msg&quot;: &quot;成功&quot;}</code></td> <td><code>{&quot;code&quot;: 403, &quot;msg&quot;: &quot;权限不足&quot;}</code></td></tr> <tr><td>批量删除</td> <td><code>{&quot;code&quot;: 0, &quot;data&quot;: true, &quot;msg&quot;: &quot;成功&quot;}</code></td> <td><code>{&quot;code&quot;: 403, &quot;msg&quot;: &quot;权限不足&quot;}</code></td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>新增的请求建议返回新增后的实体对象，便于前端实现增、删、改、查功能</p></div> <h3 id="分页查询多个实体-响应示例"><a href="#分页查询多个实体-响应示例" class="header-anchor">#</a> 分页查询多个实体 响应示例</h3> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;msg&quot;</span><span class="token operator">:</span> <span class="token string">&quot;成功&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;code&quot;</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token property">&quot;data&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;limit&quot;</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    <span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      <span class="token property">&quot;appId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;9b2b8839bc8f4edbb9ef783cb9ea1d2f&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;code&quot;</span><span class="token operator">:</span> <span class="token string">&quot;navigation&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;contextPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/navigation&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;menus&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;后台管理&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;orderNum&quot;</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token property">&quot;pkValue&quot;</span><span class="token operator">:</span> <span class="token string">&quot;9b2b8839bc8f4edbb9ef783cb9ea1d2f&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;remark&quot;</span><span class="token operator">:</span> <span class="token string">&quot;3&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;appId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;384f5ee687f04cd9b4e6410350d4e07c&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;code&quot;</span><span class="token operator">:</span> <span class="token string">&quot;resource&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;contextPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/resource&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;menus&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;资源库&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;orderNum&quot;</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
      <span class="token property">&quot;pkValue&quot;</span><span class="token operator">:</span> <span class="token string">&quot;384f5ee687f04cd9b4e6410350d4e07c&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;remark&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;appId&quot;</span><span class="token operator">:</span> <span class="token string">&quot;e9ce35e8731448de9ab0f94a1eaa4ff9&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;code&quot;</span><span class="token operator">:</span> <span class="token string">&quot;4&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;contextPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;3&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;menus&quot;</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;12&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;orderNum&quot;</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
      <span class="token property">&quot;pkValue&quot;</span><span class="token operator">:</span> <span class="token string">&quot;e9ce35e8731448de9ab0f94a1eaa4ff9&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;remark&quot;</span><span class="token operator">:</span> <span class="token string">&quot;33&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token property">&quot;page&quot;</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token property">&quot;total&quot;</span><span class="token operator">:</span> <span class="token number">3</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><h3 id="响应码code的约定"><a href="#响应码code的约定" class="header-anchor">#</a> 响应码code的约定</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code>0：执行成功
401：未登录（需要重新登录）
403：权限不足
500：系统内部错误（非业务代码里显式抛出的异常，例如由于数据不正确导致空指针异常、数据库异常等等）
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="请求跨域问题解决方案"><a href="#请求跨域问题解决方案" class="header-anchor">#</a> 请求跨域问题解决方案</h3> <p>前后端分离开发模式，由于前后端可以进行单独部署，请求跨域问题很常见，解决方法主要有两种方式：</p> <ol><li>采用nginx代理</li> <li>接口响应头开启Cross （推荐）</li></ol> <p>响应头需要做以下配置, 同时后端需要开放OPTIONS类型的请求，跨域带cookie的请求时，浏览器先试探性发送OPTIONS请求，成功后才发起真正的请求</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> Access-Control-Allow-Credentials:true
 Access-Control-Allow-Origin:请求的host
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>如：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> Access-Control-Allow-Credentials:true
 Access-Control-Allow-Origin:http://www.fbknav.cn:98
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>建议后端代码不要写死Access-Control-Allow-Origin，可以从请求头中动态获取 Origin</p></div> <p>如果接口不需跨域带cookie验证信息，可以简单设置</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> Access-Control-Allow-Origin: *
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="全局配置"><a href="#全局配置" class="header-anchor">#</a> 全局配置</h2> <p>当后端提供的接口与约定的规范不一致的时候，可以通过配置进行相应的调整做适配，但建议还是按前端建议的约定规范。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>注意：不是任何接口都能通过全局来适配, 要具体问题具体分析。 全局配置的文件路径：<code>/my.config.js</code>, <a href="/my/guide/config.html#my-config-js">配置说明</a></p></div> <h2 id="常用的配置项"><a href="#常用的配置项" class="header-anchor">#</a> 常用的配置项</h2> <h3 id="pathprefix"><a href="#pathprefix" class="header-anchor">#</a> pathPrefix</h3> <p>配置api请求地址前缀, String类型， 默认为空字符串，即请求和页面所在的服务器， 如果后台服务接口与页面部署的服务器不一样时，可以全局配置，也可以在实体配置prefix选项。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>注意：配置pathPrefix的值必须要在 <code>/src/config.js</code> 中有定义，否则报错。</p></div> <h3 id="methodtypemap"><a href="#methodtypemap" class="header-anchor">#</a> methodTypeMap</h3> <p>数据请求类型对应http请求方法的映射， 默认值：</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code> <span class="token punctuation">{</span>
    fetch<span class="token operator">:</span> 'get'<span class="token punctuation">,</span>
    get<span class="token operator">:</span> 'get'<span class="token punctuation">,</span>
    add<span class="token operator">:</span> 'post'<span class="token punctuation">,</span>
    update<span class="token operator">:</span> 'post'<span class="token punctuation">,</span>
    remove<span class="token operator">:</span> 'get'
    batch<span class="token operator">:</span> 'post'
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="methodsuffixmap"><a href="#methodsuffixmap" class="header-anchor">#</a> methodSuffixMap</h3> <p>数据请求类型对应api地址的后缀映射， 默认值：</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    fetch<span class="token operator">:</span> ''<span class="token punctuation">,</span>
    get<span class="token operator">:</span> '/<span class="token operator">:</span>id'<span class="token punctuation">,</span>
    add<span class="token operator">:</span> ''<span class="token punctuation">,</span>
    update<span class="token operator">:</span> ''<span class="token punctuation">,</span>
    remove<span class="token operator">:</span> '/<span class="token operator">:</span>id'<span class="token punctuation">,</span>
    batch<span class="token operator">:</span> '/remove'
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="methodcommentmap"><a href="#methodcommentmap" class="header-anchor">#</a> methodCommentMap</h3> <p>请求方法对应的中文注释</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
    fetch<span class="token operator">:</span> '获取&lt;%=cname%&gt;列表'<span class="token punctuation">,</span>
    get<span class="token operator">:</span> '获取&lt;%=cname%&gt;单条记录'<span class="token punctuation">,</span>
    add<span class="token operator">:</span> '新增&lt;%=cname%&gt;'<span class="token punctuation">,</span>
    update<span class="token operator">:</span> '更新&lt;%=cname%&gt;'<span class="token punctuation">,</span>
    remove<span class="token operator">:</span> '删除&lt;%=cname%&gt;'<span class="token punctuation">,</span>
    batch<span class="token operator">:</span> '批量删除&lt;%=cname%&gt;'
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="batchenabled"><a href="#batchenabled" class="header-anchor">#</a> batchEnabled</h3> <p>是否全局开启生成批量删除，默认值：true
这个设置是新增的，在老版本下缺少这个配置，就是false</p> <h3 id="statelistname"><a href="#statelistname" class="header-anchor">#</a> stateListName</h3> <p>store 或 mixin 状态保存列表的字段名称，和接口响应数据对应， 默认：list</p> <h3 id="statemodelname"><a href="#statemodelname" class="header-anchor">#</a> stateModelName</h3> <p>store 或 mixin 状态保存单个实体字段名称，默认：model</p> <h3 id="statepagename"><a href="#statepagename" class="header-anchor">#</a> statePageName</h3> <p>store 或 mixin 状态保当前页码的字段名称，和接口响应数据对应， 默认：page</p> <h3 id="statepagesizename"><a href="#statepagesizename" class="header-anchor">#</a> statePageSizeName</h3> <p>store 或 mixin 状态保存页大小的字段名称，和接口响应数据对应，默认：limit</p> <h3 id="statetotalname"><a href="#statetotalname" class="header-anchor">#</a> stateTotalName</h3> <p>store 或 mixin 状态保存数据总条数字段名称，和接口响应数据对应，默认：total</p> <h3 id="mockdataname"><a href="#mockdataname" class="header-anchor">#</a> mockDataName</h3> <p>Mock响应数据字段名称，默认：data</p> <h3 id="mockcodename"><a href="#mockcodename" class="header-anchor">#</a> mockCodeName</h3> <p>Mock响应状态字段名称，默认：code</p> <h3 id="mockmsgname"><a href="#mockmsgname" class="header-anchor">#</a> mockMsgName</h3> <p>Mock响应信息说明字段名称，默认：msg</p> <h3 id="successcodevalue"><a href="#successcodevalue" class="header-anchor">#</a> successCodeValue</h3> <p>Mock响应成功时的code值，默认：0</p> <h2 id="模型配置"><a href="#模型配置" class="header-anchor">#</a> 模型配置</h2> <p>一个标准的模型配置文件如下，建议相同的实体操作都在一个文件里配置。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>             <span class="token comment">// 是否生成store，如果设置false，不生成store，只会生成mixin, 默认值false</span>
  name<span class="token operator">:</span> <span class="token string">'用户信息'</span><span class="token punctuation">,</span>        <span class="token comment">// 模型名称，用来生成注释文档</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/users'</span><span class="token punctuation">,</span>   <span class="token comment">// 接口地址路径，必须</span>
    title<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>            <span class="token comment">// 接口说明，用来生成注释文档</span>
    prefix<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>           <span class="token comment">// 接口地址前缀，可选，默认为空, 名称必须要在 src/config.js中定义，否则报错</span>
    methods<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'fetch'</span><span class="token punctuation">,</span> <span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token string">'update'</span><span class="token punctuation">,</span> <span class="token string">'remove'</span><span class="token punctuation">,</span> <span class="token string">'batch'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>  <span class="token comment">// 生成请求方法，默认全部，如需要自定义，设置为false</span>
    transform<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>         <span class="token comment">// 响应数据转换函数，可选，函数名称必须要在 src/mapping/index.js 中定义，否则会报错</span>
    options<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token comment">// ajax 参数选项，可选</span>
    name<span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span>              <span class="token comment">// 自定义方法名称，methods为false，必须要设置</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token comment">// 模拟数据字段mock模板，可选</span>
    template<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>         <span class="token comment">// Mock自定义模板函数名称, 名称必须在/src/mock/templates.js中能找到，设置了该值，columns将失效</span>
    method<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>           <span class="token comment">// 自定义方法按那种方式生成store或mixin，可选， 在 methods为false时有效,可选值：fetch/get/add/update/remove</span>
    state<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>             <span class="token comment">// 定义状态保存的名称，methods为false时并且method为空时，必须要设置state 和 name</span>
    disabled<span class="token operator">:</span> <span class="token boolean">false</span>      <span class="token comment">// 是否禁用该配置项， 设置为true，代码生成器将忽略该配置</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>上述配置，除了path是必须要填写之外，其他选项都是可选的， model支持 Array或Object类型配置</p></div> <h3 id="_1、实现对一个实体进行增、删、改、查"><a href="#_1、实现对一个实体进行增、删、改、查" class="header-anchor">#</a> 1、实现对一个实体进行增、删、改、查</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>当请求响应的数据无组件或页面之间的共享需求时，可以使用mixin模式，把数据存储到组件内部data，而不是存储到store。启用mixin模式，只需设置vuex为false</p></div> <h3 id="_2、实现对一个实体进行增、删、改、查-并且带模拟数据"><a href="#_2、实现对一个实体进行增、删、改、查-并且带模拟数据" class="header-anchor">#</a> 2、实现对一个实体进行增、删、改、查，并且带模拟数据</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user'</span><span class="token punctuation">,</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'@cname'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_3、只需要增、删、改、查中得某些操作-可以指定生成你需要的方法"><a href="#_3、只需要增、删、改、查中得某些操作-可以指定生成你需要的方法" class="header-anchor">#</a> 3、只需要增、删、改、查中得某些操作，可以指定生成你需要的方法</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user'</span><span class="token punctuation">,</span>
    <span class="token comment">// 需要生成的方法，可以按需要设置</span>
    methods<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'fetch'</span><span class="token punctuation">,</span> <span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token string">'update'</span><span class="token punctuation">,</span> <span class="token string">'remove'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'@cname'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_4、自定义方法配置"><a href="#_4、自定义方法配置" class="header-anchor">#</a> 4、自定义方法配置</h3> <p>当有接口不合适归类为通用的增、删、改、查 或 接口响应数据格式较特别，可以使用自定义方法配置，如：用户登录</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user/login'</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'login'</span><span class="token punctuation">,</span>
    state<span class="token operator">:</span> <span class="token string">'loginInfo'</span><span class="token punctuation">,</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'@cname'</span><span class="token punctuation">,</span>
      loginTime<span class="token operator">:</span> <span class="token string">'@date'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>上述配置表示调用 login 方法 请求接口返回模拟数据，并存储到store对应实体对象的loginInfo属性里</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>methods为false时，必须要设置name</p></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>vuex模式，methods为false，并且method为空时，必须要设置state</p></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>method的值必须是fetch get add update remove batch 中的一个</p></div> <h3 id="_5、同一个实体模型配置多个方法"><a href="#_5、同一个实体模型配置多个方法" class="header-anchor">#</a> 5、同一个实体模型配置多个方法</h3> <p>model支持Array的配置项, 以下示例配置了user的增、删、改、查，登录、注销接口</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">'/api/users'</span><span class="token punctuation">,</span>
      columns<span class="token operator">:</span> <span class="token punctuation">{</span>
        id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'@cname'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">'/api/user/login'</span><span class="token punctuation">,</span>
      methods<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      state<span class="token operator">:</span> <span class="token string">'loginInfo'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'login'</span><span class="token punctuation">,</span>
      columns<span class="token operator">:</span> <span class="token punctuation">{</span>
        id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'@cname'</span><span class="token punctuation">,</span>
        loginTime<span class="token operator">:</span> <span class="token string">'@date'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">'/api/user/logout'</span><span class="token punctuation">,</span>
      methods<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      state<span class="token operator">:</span> <span class="token string">'logoutInfo'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'logout'</span><span class="token punctuation">,</span>
      columns<span class="token operator">:</span> <span class="token punctuation">{</span>
        logoutTime<span class="token operator">:</span> <span class="token string">'@date'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="_6、自定义ajax参数选项"><a href="#_6、自定义ajax参数选项" class="header-anchor">#</a> 6、自定义Ajax参数选项</h3> <p>当api要求特殊，不能通过全局配置来解决时，可以通过配置 <code>options</code> 对 ajax的参数进行设置, 如：</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user/login'</span><span class="token punctuation">,</span>
    options<span class="token operator">:</span> <span class="token punctuation">{</span>
      method<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
      headers<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="_7、自定义模拟数据模板"><a href="#_7、自定义模拟数据模板" class="header-anchor">#</a> 7、自定义模拟数据模板</h3> <p>当需要模拟的数据不能通过定义列columns来满足需求时，可以自定义template， 如模拟一个树结构，需要编写一个模板函数，模板函数必须要在 <code>/src/mock/templates.js</code> 中定义，示范代码如下：</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/**
 * 模拟一个树结构
 * @param Mock Mock实例
 * @param url 请求的url
 * @param query 查询参数对象
 * @returns {Object}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createTree</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">Mock<span class="token punctuation">,</span> url<span class="token punctuation">,</span> query</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> root <span class="token operator">=</span> Mock<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token string">'list|30'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      <span class="token string">'id|+1'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token string">'label'</span><span class="token operator">:</span> <span class="token string">'@ctitle'</span><span class="token punctuation">,</span>
      <span class="token string">'parentId'</span><span class="token operator">:</span> <span class="token keyword">null</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">let</span> data <span class="token operator">=</span> Mock<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token string">'list|100'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      <span class="token string">'id|+1'</span><span class="token operator">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
      <span class="token string">'label'</span><span class="token operator">:</span> <span class="token string">'@ctitle'</span><span class="token punctuation">,</span>
      <span class="token string">'parentId'</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">50</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>code<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{</span>list<span class="token operator">:</span> root<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>list<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>代码生成器配置</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/menus/tree'</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'getTree'</span><span class="token punctuation">,</span>
    state<span class="token operator">:</span> <span class="token string">'tree'</span><span class="token punctuation">,</span>
    template<span class="token operator">:</span> <span class="token string">'createTree'</span> <span class="token comment">// 调用模板生成模拟数据</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_8、自定义数据转换函数"><a href="#_8、自定义数据转换函数" class="header-anchor">#</a> 8、自定义数据转换函数</h3> <p>当需要后端接口响应的数据进行转换时，可以通过配置转换函数来处理。转换函数必须要在 <code>/src/mapping/index.js</code> 中定义</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/**
 * 数据转换函数示例
 * @param json 原始数据，即借口响应的json
 * @param method 接口调用方法名称
 * @param data 请求发送的数据对象
 * @param params 请求的url参数对象
 * @returns {*}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">dataMap</span> <span class="token punctuation">(</span><span class="token parameter">json<span class="token punctuation">,</span> method<span class="token punctuation">,</span> data<span class="token punctuation">,</span> params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 对原始数据进行修改后，return 出去</span>
  <span class="token keyword">return</span> json
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>代码生成器配置</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/menus/tree'</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'getTree'</span><span class="token punctuation">,</span>
    state<span class="token operator">:</span> <span class="token string">'tree'</span><span class="token punctuation">,</span>
    transform<span class="token operator">:</span> <span class="token string">'dataMap'</span> <span class="token comment">// 调用数据转换函数</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_9、指定请求接口地址前缀"><a href="#_9、指定请求接口地址前缀" class="header-anchor">#</a> 9、指定请求接口地址前缀</h3> <p>请求接口地址前缀默认取全局配置的 pathPrefix ，如果有特殊接口，前缀与全局配置的不同时，可以在文件 <code>/src/config.js</code> 新增配置，然后在配置代码生成器。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user'</span><span class="token punctuation">,</span>
    prefix<span class="token operator">:</span> <span class="token string">'OTHER_PATH'</span><span class="token punctuation">,</span> <span class="token comment">// 设置与全局配置不同的前缀</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'@cname'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="调用方式"><a href="#调用方式" class="header-anchor">#</a> 调用方式</h2> <p>代码生成器配置支持vuex 和 mixin 两种模式，以下分别对两种模式进行调用说明。</p> <h3 id="vuex-模式调用"><a href="#vuex-模式调用" class="header-anchor">#</a> vuex 模式调用</h3> <p>如代码生成器架构配置，新建文件 <code>/schemas/user.js</code>, 文件内容如下：</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user'</span><span class="token punctuation">,</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'@cname'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上述配置，生成代码后，创建了文件 <code>/.my/code/store/user.js</code>， 可以在vue组件内import需要调用的方法，并绑定到模板，如：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in user.list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> {{item.name} } <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> user <span class="token keyword">from</span> <span class="token string">'$my/code/store/user'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  mixins<span class="token operator">:</span> <span class="token punctuation">[</span>user<span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 触发获取列表的 action</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetchUser</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
         data<span class="token operator">:</span> <span class="token punctuation">{</span>
            page<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
            limit<span class="token operator">:</span> <span class="token number">10</span>
          <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="mixin-模式调用"><a href="#mixin-模式调用" class="header-anchor">#</a> mixin 模式调用</h3> <p>如代码生成器架构配置，新建文件 <code>/coder/schemas/user.js</code>, 文件内容如下：</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>  <span class="token comment">// 启用mixin模式</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user'</span><span class="token punctuation">,</span>
    columns<span class="token operator">:</span> <span class="token punctuation">{</span>
      id<span class="token operator">:</span> <span class="token string">'@guid'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'@cname'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上述配置，生成代码后，创建了文件 <code>/.my/code/mixin/user.js</code>， 可以在vue组件内mixins方式继承 user 的方法获取数据，并绑定到模板，如：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in user.list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> {{item.name} } <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> user <span class="token keyword">from</span> <span class="token string">'$my/code/mixin/user'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  mixins<span class="token operator">:</span> <span class="token punctuation">[</span>user<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 混合集成 user</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 调用获取列表方法</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetchUser</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
         data<span class="token operator">:</span> <span class="token punctuation">{</span>
            page<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
            limit<span class="token operator">:</span> <span class="token number">10</span>
          <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="常见问题"><a href="#常见问题" class="header-anchor">#</a> 常见问题</h2> <h3 id="_1、post数据时-后端接口接收不到前端传递的参数。"><a href="#_1、post数据时-后端接口接收不到前端传递的参数。" class="header-anchor">#</a> 1、POST数据时，后端接口接收不到前端传递的参数。</h3> <p>前端框架在默认情况下，POST数据是以 application/json 的方式传输JSON字符串。如果后端对传递的数据不是反序列化JSON的，需要对接收参数的代码进行改造。</p> <p>如果后端接口有某些原因不能修改，可以在前端发送的请求头做处理。</p> <p>代码生成器的配置以表单的形式提交数据实例：</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  vuex<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  model<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/api/user/login'</span><span class="token punctuation">,</span>
    options<span class="token operator">:</span> <span class="token punctuation">{</span>
      method<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
      headers<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>表单提交二进制流用 'Content-type': 'multipart/form-data'</p></div> <h3 id="_2、请求接口跨域报错"><a href="#_2、请求接口跨域报错" class="header-anchor">#</a> 2、请求接口跨域报错</h3> <p>前后端分离开发模式，由于前后端可以进行单独部署，请求跨域问题很常见，解决方法主要有两种方式：</p> <ol><li>采用nginx代理</li> <li>接口响应头开启Cross （推荐）</li></ol> <p>响应头需要做以下配置, 同时后端需要开放OPTIONS类型的请求，跨域带cookie的请求时，浏览器先试探性发送OPTIONS请求，成功后才发起真正的请求</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> Access-Control-Allow-Credentials:true
 Access-Control-Allow-Origin:请求的host
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>如：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> Access-Control-Allow-Credentials:true
 Access-Control-Allow-Origin:http://www.fbknav.cn:98
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>建议后端代码不要写死Access-Control-Allow-Origin，可以从请求头中动态获取 Origin</p></div> <p>如果接口不需跨域带cookie验证信息，可以简单设置</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> Access-Control-Allow-Origin: *
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/guide/cmd.html" class="prev">
        脚本命令
      </a></span> <span class="next"><a href="/my/guide/config.html">
        配置
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.fc4964fc.js" defer></script><script src="/my/assets/js/513.edb84f11.js" defer></script><script src="/my/assets/js/1380.293bba0c.js" defer></script>
  </body>
</html>
